<%--
  Created by IntelliJ IDEA.
  User: 29942
  Date: 2024/6/19
  Time: 20:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
<%--    <link type="text/css" rel="stylesheet" href="web/css/bootstrap.css">--%>
<%--    <link type="text/css" rel="stylesheet" href="web/js/jquery-3.7.1.js">--%>
    <script type="text/javascript" src="js/jquery-3.7.1.js"></script>
    <style>
        .registration {
            margin: 20px;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 5px;
            max-width: 400px;
            margin: 0 auto;
        }
        .registration h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        .reg1 span {
            display: block;
            margin-bottom: 10px;
        }
        .reg1 input[type="text"],
        .reg1 input[type="email"],
        .reg1 input[type="password"] {
            width: 95%;
            padding: 10px;
            border-radius: 3px;
            border: 1px solid #ccc;
            margin-bottom: 15px;
            font-size: 16px;
        }
        .reg2 input[type="submit"] {
            /*background-color: #ed9810;*/
            background-color: black;
            color: #fff;
            border: none;
            padding: 12px;
            font-size: 16px;
            border-radius: 3px;
            cursor: pointer;
        }
        .reg2 input{
            width: 100%;
        }
        .reg2 input[type="submit"]:hover {
            background-color: #222;
        }

    </style>


</head>


<body>
<!-- 注册表单 -->
<div class="registration">
    <form action="UserRegisterServlet" method="post" id="registerInfo">
        <div class="reg1">
            <h1>注册新用户</h1>
            ${registerInfo}
            <div>
                <span>用户名<label style="color: red;">*</label></span>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required="required">
                <label id="checkusername"></label>
            </div>
            <div>
                <span>邮箱<label style="color: red;">*</label></span>
                <input type="text" name="email" placeholder="请输入邮箱" required="required">
            </div>
            <div>
                <span>密码<label style="color: red;">*</label></span>
                <input type="text" name="password" placeholder="请输入密码" required="required">
            </div>
            <div>
                <span>收货人<label></label></span>
                <input type="text" name="name" placeholder="请输入收货人" required="required">
            </div>
            <div>
                <span>收货电话<label></label></span>
                <input type="text" name="phone" placeholder="请输入收货电话" required="required">
            </div>
            <div>
                <span>收货地址<label></label></span>
                <input type="text" name="address" placeholder="请输入收货地址" required="required">
            </div>
            <div></div>
        </div>
        <div class="reg2">
            <input type="submit" value="提交">
        </div>
    </form>
</div>
<script type="text/javascript">
    <%--创建表单失焦事件：检测用户名是否与数据库中重复--%>
    $("#username").bind("blur",function(){
        //发送ajax请求
        //获取用户名
        var name=$("#username").val();
        $.post("checkUsernameServlet",{username:name},function(res){
            if(res.code==200){
                $("#checkusername").replaceWith("<label id='checkusername' style='color:dimgrey'>用户名可用！</label>");
            }else {
                $("#checkusername").replaceWith("<label id='checkusername' style='color: red'>用户名不可用！</label>");
            }
        },"json");
    });
</script>
</body>
</html>
